<template>
	<section class="scholl" >
		<div>
			<ul class="member-info-list">
				<li class="info-list-item">					
					<div class="size_list layout pt20rem pb20rem pl30rem pr30rem border-b">
						<div class="flex_1 layout" @click='changeAvatar'>
							<div class="fs30rem c333">头像</div>
							<div class="layout">
								<input type="file" id="avatar" name='avatar' @change="upload" style="display: none;">
								<img class="member-head" :src="userInfo.user_heading" v-if="userInfo.user_heading">
								<img class="member-head" :src="userHead" v-else>
								<i class="iconfont icon-right2 fs20rem ml30rem color999"></i>
							</div>
						</div>
					</div>					
				</li>
				<li class="info-list-item">					
					<div class="size_list layout pt20rem pb20rem pl30rem pr30rem border-b">
						<div class="flex_1 layout">
							<div class="fs30rem c333">用户名</div>
							<div class="layout">
								<span class="fs28rem c999">
									{{userInfo.user_name}}				
								</span>
								<i class="ml30rem block" style="width:0.857142rem;"></i>
							</div>							
						</div>
					</div>					
				</li>
				
				<li class="info-list-item" @click="changeNickName">					
					<div class="size_list layout pt20rem pb20rem pl30rem pr30rem border-b">
						<div class="flex_1 layout">
							<div class="fs30rem c333">昵称</div>
							<div class="layout" >
								<span class="fs28rem c999" >
									{{userInfo.nick_name}}				
								</span>
								<i class="iconfont icon-right2 fs20rem ml30rem color999"></i>
							</div>						
						</div>
					</div>					
				</li>
				<li class="info-list-item" @click="changeMobile">					
					<div class="size_list layout pt20rem pb20rem pl30rem pr30rem border-b">
						<div class="flex_1 layout">
							<div class="fs30rem c333">手机</div>
							<div class="layout" >
								<span class="fs28rem c999" >
									{{userInfo.user_tel}}				
								</span>
								<i class="iconfont icon-right2 fs20rem ml30rem color999"></i>
							</div>						
						</div>
					</div>					
				</li>
				<li class="info-list-item">					
					<div class="size_list layout pt20rem pb20rem pl30rem pr30rem border-b">
						<div class="flex_1 layout" @click="popupVisible = true">
							<div class="fs30rem c333">性别</div>
							<div class="layout">
								<span class="fs28rem c999">
									{{userInfo.sex | sexFormat}}
								</span>
								<i class="iconfont icon-right2 fs20rem ml30rem color999"></i>
							</div>
						</div>
						<popup v-model="popupVisible"  position="bottom">
							<picker :slots="slots" @change="onValuesChange"></picker>
						</popup>
					</div>					
				</li>
				<li class="info-list-item">					
					<div class="size_list layout pt20rem pb20rem pl30rem pr30rem border-b">
						<div class="flex_1 layout"  @click="changeTime">
							<div class="fs30rem c333">出生日期</div>
							<div class="layout">
								<span class="fs28rem c999">
									{{userInfo.birthday}}
								</span>
								<i class="iconfont icon-right2 fs20rem ml30rem color999"></i>
							</div>							
						</div>
						<datetime-picker
						  ref="picker"
						  v-model="timeValue"
						  type="date"
						  :startDate="startDate"
						  :endDate="endDate"
						  @confirm="handleConfirm">
						</datetime-picker>
					</div>					
				</li>
			</ul>
		</div>

	</section>
</template>

<script>

	import { personInfo } from "@/api/member";
	import { modifyPersonMess } from "@/api/member";
	import { MessageBox, Popup, Picker, DatetimePicker  } from 'mint-ui';
	import { formatDate, uploadAvatar, iosapp } from "@/utils"
	export default{
		components:{
			Popup, 
			Picker,
			DatetimePicker
		},
	    data() {
	    	return{
	    		uid 		: window.localStorage.getItem("uid"),	    		
    			sexValue 	: 1,
	    		userHead 	: require("../../../assets/member/avatar.png"),
	    		imgUrl 		: process.env.IMG_URL,
	    		popupVisible: false,
	    		showApp     : window.sessionStorage.getItem('isapp'),
	    		timeValue 	: new Date(),
	    		endDate     : new Date(),
	    		startDate   : new Date('1918-01-01'),
	    		slots: [
			        {
			          values   : ['男', '女', '保密'],
			          textAlign: 'center'
			        }
			    ],
			    test: '',
			    userInfo: {
					icon      : '',
					nick_name : '',
					sex       : '',
					birthday  : '',
					user_tel  : '',
    			}
	    	}
	    },
	    created()
	    {  
	    	personInfo(this.uid).then( res => {
	    		this.userInfo = res.data; 
	    		this.sexValue = this.userInfo.sex;

	    		if(res.data.user_heading)
	    			this.userInfo.user_heading = this.imgUrl + res.data.user_heading;			
	    	});
	    },
	    methods:
	    {
	    	changeAvatar()
	    	{
	    		document.getElementById('avatar').click();
	    	},
	    	upload()
	    	{
				uploadAvatar('avatar',res => {
	    			this.userInfo.user_heading = res;
	    			window.sessionStorage.removeItem('user_img');	
	    			this.submit();
	    		})
	    	},
	    	changeMobile()
	    	{
	    		MessageBox.prompt(' ').then(({ value, action }) => {
				  this.userInfo.user_tel = value;
				  this.submit();
				});
	    	},
	    	changeNickName()
	    	{
	    		MessageBox.prompt(' ').then(({ value, action }) => {
				  this.userInfo.nick_name = value;
				  this.submit();
				});
	    	},
	    	onValuesChange(picker, values) 
	    	{
	    		picker.setSlotValue(1, values[0]);		      	
		      	switch(values[0])
				{
					case "男":
						this.sexValue = 1;
						break;
					case "女":
					  	this.sexValue = 2;
					  	break;
					case "保密":
					  	this.sexValue = 3;
				}
				this.slots.defaultIndex = this.sexValue - 1; 

				if(this.popupVisible){
					this.userInfo.sex = values[0]; 
					this.submit();
				}
		      	
    		},
    		changeTime()
    		{
    			this.$refs.picker.open();
    		},
    		handleConfirm()
    		{
    			this.userInfo.birthday = formatDate(this.timeValue, "yyyy-MM-dd");
    			this.submit();
    		},
    		submit()
    		{ 
    			let params = {
					uid       : window.localStorage.getItem("uid"),
					icon      : this.userInfo.user_heading,
					nick_name : this.userInfo.nick_name,
					sex       : this.sexValue,
					birthday  : this.userInfo.birthday,
					user_tel  : this.userInfo.user_tel
    			}
    			modifyPersonMess(params).then( res => {});
    		}
	    },
	    filters:{
	    	sexFormat(value){
	    		switch(value)
	    		{
	    			case 1:
	    				return '男';
	    				break;
	    			case 2:
	    				return '女';
	    				break;
	    			case 3:
	    				return '保密';
	    				break;
	    			default: return value;
	    		}
	    	}
	    }	    
	}
</script>

<style lang="less">
	.member-info-list{
		.info-list-item{
			.member-head{
				width: 85/28rem;
				height: 85/28rem;
				object-fit: cover;
				border-radius: 100%;
			}
			.mint-popup{
				width: 100%;
			}
		}
	}
</style>

